<div class="layui-fluid layui-anim website-anim-up" id="website-class-assign" lay-title="分配专家">
    <div class="layui-row layui-col-space8 website-container">
        <div class="layui-col-md10 layui-col-sm10 layui-col-xs10">
            <input type="hidden" id="operation" autocomplete="off" class="layui-input" data-th-value="${operation}"/>
            <input type="hidden" id="topicId" autocomplete="off" class="layui-input" data-th-value="${topicId}"/>
            <input type="hidden" id="topicClassifyCode" autocomplete="off" class="layui-input"
                   data-th-value="${topicClassifyCode}"/>
            <div class="layui-card" id="client-class-expert">
                <div class="layui-card-header">专家组成员信息</div>
                <div class="layui-card-body website-table-full">
                    <form class="layui-form layui-table-form" lay-filter="expert-table-form">
                        <div class="layui-row">
                            <div class="layui-col-md10">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <input type="text" name="name" autocomplete="off" class="layui-input"
                                                   placeholder="请输入专家姓名">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label layui-form-label-sm">学科分类</label>
                                        <div class="layui-input-inline">
                                            <select name="subjectTypeCode">
                                                <option value="">请选择</option>
                                                <option
                                                        th:each="item : ${subjectTypes}"
                                                        th:value="${item.code}" th:text="${item.name}">
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label layui-form-label-sm">学术委员会成员</label>
                                        <div class="layui-input-inline">
                                            <select name="isMember">
                                                <option value="">请选择</option>
                                                <option value="1">是</option>
                                                <option value="0">否</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md2 layui-col-sm12 layui-col-xs12 table-action-area">
                                <div class="layui-btn layui-btn-sm layui-btn-primary website-button-blue-plain table-action"
                                     id="query">
                                    查询
                                </div>
                            </div>
                        </div>
                    </form>
                    <div id="showTipExpert"></div>
                    <table id="expertTable" lay-filter="expertTable"
                           lay-data="{id: 'expertTable'}"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarExpertSave">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getAllData">确认</button>
    </div>
</script>

<script type="text/html" id="expert-class">
    {{#
    let dict=layui.dict.getByCode(d.subjectTypeCode);
    }}
    {{#  if(dict){ }}
    <span>{{ dict.name }}</span>
    {{#  } }}
</script>
<script type="text/html" id="expert-district">
    {{#
    let dict=layui.dict.getByCode(d.districtTypeCode);
    }}
    {{#  if(dict){ }}
    <span>{{ dict.name }}</span>
    {{#  } }}
</script>
<script type="text/html" id="expert-feature">
    {{#
    let dict=layui.dict.getByCode(d.featureTypeCode);
    }}
    {{#  if(dict){ }}
    <span>{{ dict.name }}</span>
    {{#  } }}
</script>
<script type="text/html" id="groupNo-class">
    <span>第{{ d.groupNo }}组</span>
</script>
<script data-th-inline="javascript" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'laydate', 'form', 'table', 'website', 'treeSelect', 'dict'], function () {
        let $ = layui.jquery,
            laydate = layui.laydate,
            website = layui.website,
            form = layui.form,
            table = layui.table,
            planId = [[${planId}]],
            year = [[${year}]],
            treeSelect = layui.treeSelect,
            dropdown = layui.dropdown,
            $view = $('#website-class-assign'),
            $query = $('#query'),
            $searchForm = $view.find('form'),
            sortObject = {field: 'createTime', type: null},
            $expertView = $('#client-class-expert'), expertTableIns;
        // 重新渲染 form否则不会显示下拉框
        form.render();
        initExpertTable();

        function initExpertTable() {
            expertTableIns = website.table.init({
                elem: $expertView.find('table'),
                toolbar: '#toolbarExpertSave',
                defaultToolbar: [],
                id: 'expertTable',
                url: ctx + 'expert/guide/list/' + planId,
                cols: [
                    [
                        {type: 'checkbox', title: '选择'},
                        {type: 'numbers', title: '序号'},
                        {field: 'name', title: '姓名', minWidth: 80},
                        {title: '学科', templet: '#expert-class'},
                        {field: 'mobile', title: '联系电话'},
                        {field: 'company', title: '工作单位'},
                        {title: '京内/京外', templet: '#expert-district'},
                        {title: '理论/实务', templet: '#expert-feature'}
                    ]
                ]
            });
        }

        /**
         * table操作栏的按钮监听事件
         **/
        table.on('tool(expertTable)', function (obj) {
            let data = obj.data,
                layEvent = obj.event;
        });
        table.on('sort(expertTable)', function (obj) {
            sortObject = obj;
            expertTableIns.reload({
                initSort: obj,
                where: $.extend(getQueryParams(), {
                    field: obj.field,
                    order: obj.type
                })
            });
        });

        function getQueryParams() {
            var params = $searchForm.serializeJson();
            params.invalidate_ie_cache = new Date();
            return params;
        }

        $query.on('click', function () {
            var params = $.extend(getQueryParams(), {field: sortObject.field, order: sortObject.type});
            expertTableIns.reload({where: params, page: {curr: 1}});
        });

        table.on('toolbar(expertTable)', function (obj) {
            switch (obj.event) {
                case 'getAllData':
                    let tempData = table.checkStatus('expertTable'),
                        data = tempData.data
                    ; //获取数据表格中选中的数据
                    if (!data.length) {
                        website.alert.error('请选择专家');
                        return false
                    }
                    website.modal.confirm('专家确认', '确认后不能再撤回专家分配，是否确认分配的专家不再修改？', function () {
                        website.ajaxPost(ctx + 'biz/distribution/addBatch/' + planId + '/' + year, JSON.stringify(data), function (data) {
                            website.alert.success(data.data);
                            let currentUrl = window.location.hash.replace('#', '');
                            website.view.tab.del(currentUrl);
                        });
                    });
                    break;
            }

        });
    })


</script>